import React, { memo } from "react";
import PropTypes from "prop-types";
import HomeSectorV3Wrapper from "./styled";
import SectionHeader from "@/components/section-header";
import RoomItem from "@/components/room-item";
import ScrollView from "@/base-ui/scroll-view";

const HomeSectorV3 = memo(function HomeSectorV3(props) {
  const { roomListInfoObj } = props;
  return (
    <HomeSectorV3Wrapper>
      <SectionHeader
        title={roomListInfoObj.title}
        subtitle={roomListInfoObj.subtitle}
      />
      <ScrollView>
        <div className="plus-list">
          {roomListInfoObj.list.map((item) => {
            return <RoomItem roomObj={item} itemWidth="20%" key={item.id} />;
          })}
        </div>
      </ScrollView>
    </HomeSectorV3Wrapper>
  );
});

HomeSectorV3.propTypes = {
  roomListInfoObj: PropTypes.object,
};

export default HomeSectorV3;
